<!-- 18 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="handleSearch">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      group="ChangeMachineRunMode"
      ref="queryForm"
      :rules="rules"
      :model="queryForm"
      >
        <a-form-item :label="$t('T9_shopId')" name="shopId">
          <a-select v-model:value="queryForm.shopId" class="select-width">
            <a-select-option v-for="item in options.shopIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('T9_bayId')" name="bayId">
          <a-select v-model:value="queryForm.bayId" class="select-width" allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.bayIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('T9_detailEqpType')" name="detailEqpType">
          <a-select v-model:value="queryForm.detailEqpType" class="select-width" allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.detailEqpTypeList"
            :key="item" :value="item">
            {{item}}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item :label="$t('T9_eqpId')" name="eqpId">
          <a-select v-model:value="queryForm.eqpId" show-search class="select-width" allow-clear :placeholder="$t('common_pleaseSelect')">
            <a-select-option v-for="item in options.eqpIdList"
            :key="item.value" :value="item.value">
            {{item.label}}
            </a-select-option>
          </a-select>
        </a-form-item>
    </t-query-form>
    <div class="page-wrap-main">
      <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-1">
        <a-col :span="15" class="global-oper-row-title">{{ $t('T9_eqpList') }}</a-col>
        <a-col :span="8" class="global-oper-row-extra">
          <a-button>{{ $t('T9_toExcel') }}</a-button>
        </a-col>
      </a-row>
      <div class="page-wrap-main-table">
        <t-table
          :data="list.tableData"
          max-height="100%"
          :loading="searchBtnLoading"
          @checkbox-change="handleCheckChange"
          @checkbox-all="handleCheckChange"
        >
          <t-column type="checkbox" width="50"></t-column>
          <t-column field="eqpId" :title="$t('T9_eqpId')" />
          <t-column field="detailEqpType" :title="$t('T9_detailEqpType')" />
          <t-column field="runMode" :title="$t('T9_runMode')" />
        </t-table>
      </div>
      <div class='data-form page-wrap-main-bottom mt-1'>
        <a-form
          ref="dataForm"
          layout="inline"
          :colon="false"
          :model="dataForm"
          :rules="rules2"
        >
          <a-form-item :label="$t('T9_runMode')" name="runMode">
            <a-select v-model:value="dataForm.runMode" class="select-width">
              <a-select-option v-for="item in options.runModeList"
              :key="item" :value="item">
              {{item}}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label="$t('T9_comment')" name="eventComment" style="width:100%">
            <a-row type="flex" justify="space-between" align="middle">
              <a-col :span="21">
                <a-textarea allow-clear v-model:value="dataForm.eventComment" />
              </a-col>
              <a-col :span="2">
                <a-button type="primary" :loading="confirmBtnLoading" @click="showConfirm">{{ $t('t9_confirm') }}</a-button>
              </a-col>
            </a-row>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <ModalPasswordConfirm v-model:value="visible" @ok="handleOk"/>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import ModalPasswordConfirm from '@/components/ModalPasswordConfirm.vue'
  import { shopIdList } from '@/views/options'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'

  export default defineComponent({
    name: 'ChangeMachineRunMode',
    components: { ModalPasswordConfirm },
    mixins: [initOptionsMixin],
    data() {
      return {
        confirmBtnLoading: false,
        visible: false,
        searchBtnLoading: false,
        list: {
          tableData: []
        },
        queryForm: {
          shopId: 'ARRAY',
          bayId: undefined,
          detailEqpType: undefined,
          eqpId: undefined
        },
        options: {
          shopIdList,
          bayIdList: [],
          detailEqpTypeList: ['MAIN', 'UNIT', 'CHAMBER', 'SUBUNIT'],
          eqpIdList: [],
          runModeList: []
        },
        dataForm: {
          runMode: undefined,
          eventComment: '',
          eventUser: '',
          language: 'English',
          eqpList: []
        },
        rules: {
          shopId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        },
        rules2: {
          runMode: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          eventComment: [
            { required: true, message: this.$t('valid_required'), trigger: 'blur' },
            { max: 500, message: this.$t('changePoint_maxLength', { n: 500 }), trigger: 'blur' }
          ]
        }
      }
    },
    computed: {},
    watch: {
      'queryForm.shopId': {
        handler(shopId) {
          this.queryForm.bayId = undefined
          this.queryForm.eqpId = undefined
          this.options.bayIdList = []
          this.options.eqpIdList = []
          this.initOptions([
            { name: 'bayId', params: { shopId } },
            { name: 'eqpId', params: { shopId, bayId: '', version: '80064' } }
          ])
        }
      },
      'queryForm.bayId': {
        handler(bayId) {
          this.queryForm.eqpId = undefined
          this.options.eqpIdList = []
          this.initOptions([
            { name: 'eqpId', params: { shopId: this.queryForm.shopId, bayId, version: '80064' } }
          ])
        }
      }
    },
    created() {
      const { shopId, bayId } = this.queryForm
      this.initOptions([
        { name: 'bayId', params: { shopId } },
        { name: 'eqpId', params: { shopId, bayId, version: '80064' } }
      ])
      this.getRunMode()
    },
    methods: {
      handleCheckChange({ records }) {
        this.dataForm.eqpList = records.map(item => ({
          eqpId: item.eqpId
        }))
      },
      getRunMode() {
        const params = {
          dtoName: 'RunModeDTO',
          version: '80002',
          queryId: 'GetEnumDefValueList',
          enumName: 'RunMode',
          menuName: 'changeMachineRunMode',
          usage: 'getRunMode'
        }
        api
          .getList(params)
          .then((res) => {
            this.options.runModeList = res.map(item => item.runMode)
          })
          .catch((error) => {
            console.error(error)
          })
      },
      handleSearch() {
        this.$refs.queryForm
          .validate()
          .then(() => {
            if (this.searchBtnLoading) return
            this.searchBtnLoading = true
            const basicParams = {
              queryId: 'GetMachineList',
              version: '80064',
              dtoName: 'ChangeMachineRunModeEqpListDTO',
              menuName: 'changeMachineRunMode',
              usage: 'getEqpList'
            }
            if (this.queryForm.eqpId) {
              basicParams.version = '80010'
            }
            api
              .getList({ ...this.queryForm, ...basicParams })
              .then((res) => {
                this.searchBtnLoading = false
                this.list.tableData = res || []
              })
              .catch((error) => {
                this.searchBtnLoading = false
                console.error(error)
              })
          })
          .catch((error) => {
            console.log('error', error)
          })
      },
      showConfirm() {
        this.$refs.dataForm.validate().then(() => {
          this.visible = true
        }).catch((error) => {
          console.log('error', error)
        })
      },
      handleOk() {
        this.visible = false
        this.confirmBtnLoading = true
        this.dataForm.eventUser = this.$store.state.user.uid
        const basicParams = {
          menuName: 'changeMachineRunMode',
          usage: 'confirm'
        }
        api
          .confirm({ ...this.dataForm, ...basicParams })
          .then(() => {
            this.confirmBtnLoading = false
            this.$refs.dataForm.resetFields()
            this.handleSearch()
          })
          .catch((error) => {
            this.confirmBtnLoading = false
            console.error(error)
          })
      }
    }
  })
</script>
<style lang='less' scoped>
.select-width{
  width:120px
}
</style>
